<template>
  <div class="full-screen">
    <!-- 头部搜索start -->
    <div v-if="true">
      <div class="hot-search-header">
        <div class="hot-search-back" @click="goback"></div>
        <div class="hot-search-block">
          <van-search v-model="searchKey" show-action placeholder="iPhone 11">
            <template #action>
              <div class="style-change" @click="changesStyle">
                <div class="icon iconfont">&#xe652;</div>
              </div>
            </template>
          </van-search>
        </div>
      </div>
    </div>
    <!-- 头部搜索end -->
    <!-- 筛选项start -->
    <div class="search-condition">
      <div class="search-condition-top">
        <div class="search-condition-item condition-activate">综合</div>
        <div class="search-condition-item">销量</div>
        <div class="search-condition-item">
          价格
          <span v-show="true">
            <img src="../../images/sortIcon/sort_icon_default.png" />
          </span>
          <span v-show="false">
            <img src="../../images/sortIcon/sort_icon_up.png" />
          </span>
          <span v-show="false">
            <img src="../../images/sortIcon/sort_icon_low.png" />
          </span>
        </div>
        <div class="search-condition-item">筛选</div>
      </div>
      <div class="search-condition-bottom">
        <div class="condition-bottom-item">苏宁服务</div>
        <div class="condition-bottom-item triangle">屏幕尺寸</div>
        <div class="condition-bottom-item triangle">机身内存</div>
      </div>
    </div>
    <!-- 筛选项end -->
    <!-- 搜索结果列表start -->
    <div ref="scroll" class="search-result-list">
      <div class="pullup-content">
        <div
          class="result-list-item"
          v-for="(item, index) in resultList"
          :key="index"
        >
          <div class="list-item-image">
            <img :src="item.imageUrl" />
          </div>
          <div class="list-item-text">
            <div class="item-text-title">
              {{ item.title }}
            </div>
            <div class="item-configure">
              <span>128GB</span>
              <span>6.1英寸</span>
            </div>
            <div class="item-price">
              <i>￥</i>
              <span>5999</span>
              <i>.00</i>
            </div>
            <div class="item-evaluate-number">
              <div class="item-mark">
                <van-tag type="danger">自营</van-tag>
              </div>
              <div class="item-evaluate">331万+条评价 好评率95%</div>
            </div>
            <div class="item-company">Apple产品自营旗舰店</div>
          </div>
        </div>
        <div class="pullup-tips">
          <div v-if="!isPullUpLoad" class="before-trigger">
            <span class="pullup-txt">Pull up and load more</span>
          </div>
          <div v-else class="after-trigger">
            <span class="pullup-txt">Loading...</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 搜索结果列表end -->
  </div>
</template>
<script>
import BScroll from '@better-scroll/core'
import Pullup from '@better-scroll/pull-up'
BScroll.use(Pullup)
export default {
  data() {
    return {
      searchKey: '',
      resultList: [
        {
          id: 1,
          title:
            '【信用购机合约版】Apple iPhone 11 (A2223) 128GB 黑色 移动联通电信4G手机 双卡双待 ',
          imageUrl: require('../../images/searchResult/search_result_1.jpg'),
        },
        {
          id: 2,
          title: 'Apple iphone 11 ',
          imageUrl: require('../../images/searchResult/search_result_2.jpg'),
        },
        {
          id: 3,
          title: 'Apple 苹果 iPhone 11（A2223）全网通4G手机 双卡双待 黑色 128G',
          imageUrl: require('../../images/searchResult/search_result_3.jpg'),
        },
        {
          id: 4,
          title: 'Apple 苹果  iPhone 11 手机 全网通 双卡双待 紫色 128GB',
          imageUrl: require('../../images/searchResult/search_result_4.webp'),
        },
        {
          id: 5,
          title:
            '【二手9成新】苹果XS Max Apple iPhone xs max 国行MAX 二手手机双卡双待 银色 64G全网通',
          imageUrl: require('../../images/searchResult/search_result_5.webp'),
        },
        {
          id: 6,
          title:
            '【24期分期免息】Apple 苹果 iPhone 11（A2223）全网通4G手机 双卡双待 白色 128G ',
          imageUrl: require('../../images/searchResult/search_result_6.webp'),
        },
      ],
      isPullUpLoad: false,
    }
  },
  mounted() {
    this.initBscroll()
  },
  methods: {
    goback() {
      this.$router.go(-1)
    },
    changesStyle() {},
    initBscroll() {
      this.bscroll = new BScroll(this.$refs.scroll, {
        pullUpLoad: true,
      })
      this.bscroll.on('pullingUp', this.pullingUpHandler)
    },
    async pullingUpHandler() {
      this.isPullUpLoad = true
      let res = await this.getDate()
      this.resultList = res
      this.bscroll.finishPullUp()
      this.bscroll.refresh()
      this.isPullUpLoad = false
    },
    getDate() {
      var _this = this
      return new Promise((resolve) => {
        setTimeout(() => {
          let newResultList = _this.resultList.concat([
            {
              id: 1,
              title:
                '【信用购机合约版】Apple iPhone 11 (A2223) 128GB 黑色 移动联通电信4G手机 双卡双待 ',
              imageUrl: require('../../images/searchResult/search_result_1.jpg'),
            },
            {
              id: 2,
              title: 'Apple iphone 11 ',
              imageUrl: require('../../images/searchResult/search_result_2.jpg'),
            },
            {
              id: 3,
              title:
                'Apple 苹果 iPhone 11（A2223）全网通4G手机 双卡双待 黑色 128G',
              imageUrl: require('../../images/searchResult/search_result_3.jpg'),
            },
            {
              id: 4,
              title: 'Apple 苹果  iPhone 11 手机 全网通 双卡双待 紫色 128GB',
              imageUrl: require('../../images/searchResult/search_result_4.webp'),
            },
            {
              id: 5,
              title:
                '【二手9成新】苹果XS Max Apple iPhone xs max 国行MAX 二手手机双卡双待 银色 64G全网通',
              imageUrl: require('../../images/searchResult/search_result_5.webp'),
            },
            {
              id: 6,
              title:
                '【24期分期免息】Apple 苹果 iPhone 11（A2223）全网通4G手机 双卡双待 白色 128G ',
              imageUrl: require('../../images/searchResult/search_result_6.webp'),
            },
          ])
          if (newResultList.length >= 70) {
            console.log('终止加载')
            return
          }
          resolve(newResultList)
        }, 1000)
      })
    },
  },
}
</script>
<style lang="less" scoped>
@import '../../style/mixin';
// .full-screen {
//   .fullScreen();
// }
// 头部搜索框start
.hot-search-header {
  padding-right: 0.21333rem;
  background-color: #fff;
  display: flex;
  position: relative;
  overflow: hidden;
  // border-bottom: 1px solid #333;
  .hot-search-back {
    width: 2.13333rem;
    height: 2.13333rem;
    position: relative;
    margin-top: 0.21333rem;
    &::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;

      display: inline-block;
      width: 0.59733rem;
      height: 0.59733rem;
      border: 1px solid #353d44;
      border-width: 1px 0 0 1px;
      // transform: rotate(-45deg);
      transform: translate(-50%, -50%) rotate(-45deg);
    }
  }
  .hot-search-block {
    flex: 1;
    overflow: hidden;
    .style-change {
      text-align: right;
      .iconfont {
        font-size: 1.024rem;
      }
    }
  }
}
/deep/.van-search {
  padding-left: 0;
}
/deep/.van-search__content {
  padding-left: 0;
}
/deep/.van-search__action {
  // width: 35px;
}
/deep/.van-icon-search::before {
  content: '\F0AF';
  font-size: 1.024rem;
  margin-left: 0.42666rem;
  line-height: 1.19466rem;
}
/deep/.van-search {
  .positionCenter();
}
/deep/.van-field__body {
  height: 100%;
  .van-field__control {
    height: 100%;
    width: 100%;
  }
}
// 头部搜索框end
// 筛选start
.search-condition {
  background-color: #fff;
  border-top: 1px solid #ccc;
  position: relative;
  z-index: 99;
  font-size: 0.68266rem;
  color: #333;
  overflow: hidden;
  .search-condition-top {
    border-bottom: 1px solid #ccc;
    height: 1.87733rem;
    display: flex;
    .search-condition-item {
      width: 25%;
      line-height: 1.87733rem;
      text-align: center;
      position: relative;
      > span {
        display: inline-block;
        // line-height: 44px;
        position: absolute;
        top: 50%;
        right: 0.768rem;
        transform: translateY(-45%);
        img {
          width: 0.384rem;
        }
      }
    }
    .condition-activate {
      color: #f60;
    }
  }
  .search-condition-bottom {
    border-bottom: 1px solid #ccc;
    height: 1.87733rem;
    display: flex;
    overflow: hidden;
    .condition-bottom-item {
      width: 3.24266rem;
      height: 1.19466rem;
      background-color: #f5f5f5;
      margin-top: 0.42666rem;
      padding-left: 0.21333rem;
      padding-right: 0.21333rem;
      margin-left: 0.21333rem;
      margin-right: 0.21333rem;
      font-size: 0.512rem;
      text-align: center;
      line-height: 1.19466rem;
    }
    .triangle {
      position: relative;
      &::after {
        content: '';
        width: 0;
        height: 0;
        border-left: 0.17066rem solid transparent;
        border-right: 0.17066rem solid transparent;
        border-top: 0.34133rem solid #333;
        position: absolute;
        right: 0.256rem;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
}
// 筛选end
// 搜索结果列表start
.search-result-list {
  margin-top: 6.18666rem;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-color: #fff;
  font-size: 0.68266rem;
  // overflow: auto;
  z-index: -1;
  .pullup-tips {
    padding: 20px;
    text-align: center;
    color: #999;
  }
  .result-list-item {
    height: 5.97333rem;
    // background-color: skyblue;
    display: flex;
    .list-item-image {
      width: 5.12rem;
      height: 5.12rem;
      margin: auto 0;
      > img {
        width: 5.12rem;
        height: 5.12rem;
      }
    }
    .list-item-text {
      overflow: hidden;
      border-bottom: 0.04266rem solid #ddd;
      .item-text-title {
        color: #333;
        font-size: 0.59733rem;
        margin-top: 0.512rem;
        height: 1.70666rem;
        line-height: 0.85333rem;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .item-configure {
        > span {
          background-color: #f2f2f7;
          font-size: 0.512rem;
          margin-right: 0.42666rem;
          padding: 0.04266rem 0.08533rem;
          border-radius: 0.04266rem;
        }
      }
      .item-price {
        color: #e4393c;
        margin-top: 0.21333rem;
        > span {
          font-weight: 500;
        }
        > i {
          font-size: 0.512rem;
        }
      }
      .item-evaluate-number {
        display: flex;
        font-size: 0.512rem;
        margin-top: 0.21333rem;
        .item-mark {
        }
        .item-evaluate {
          line-height: 0.68266rem;
          margin-left: 0.21333rem;
        }
      }
      .item-company {
        font-size: 0.512rem;
        margin-top: 0.21333rem;
      }
    }
  }
}

// 搜索结果列表end
</style>
